<template>
    <div class="pre-order">
        <h1>确认订单</h1>
        <!-- 表格 -->
        <qf-table :border='false' :tableData="tableData" :columns="columns" :tableLoading="tableLoading">
            <!-- 产品名称 -->
            <template v-slot:productName="{ row }">
                <img :src="row.imageUrl" height="20" style="vertical-align:middle" alt="">
                &nbsp;
                <b style="color:red">{{ row.productName }}</b>
                <br>
                <b>{{ row.description }}</b>
            </template>
            <!-- 产品数量 -->
            <template v-slot:quantity="{ row }">
                <el-input-number v-model="quantity" :min="1" :max="row.inventory + 1" label="描述文字"
                    @change="handleCountChange(row.price)"></el-input-number>
            </template>
            <!-- 总价格 -->
            <template v-slot:total>
                <b style="color:red;font-size:20px">{{ tableTotal }}元</b>
            </template>
        </qf-table>
        <!-- 确认订单的按钮 -->
        <div class="total-fee">
            <div class="box-wrap">
                <div class="box-shadow">
                    <span class="realpay--title" data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg">实付款：</span>
                    <span class="realpay--price-symbol">¥</span>
                    <span class="realpay--price" style="color: rgb(255, 80, 0)">{{ tableTotal }}</span>
                    <div class="order-confirmAddr">
                        <div class="confirmAddr-addr-user">
                            <span class="confirmAddr-title">充值详情：</span><span class="confirmAddr-pro">
                                {{ desc }}
                            </span>
                        </div>
                        <div class="confirmAddr-addr">
                            <span class="confirmAddr-title">充值账户：</span><span class="confirmAddr-usn">
                                {{ userInfo.nickname }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="btn">
                <el-button type="danger" @click="commitOrder()">提交订单</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import qfTable from "@/components/qfTable/index.vue"
import * as api from "@/api/product"
import * as payApi from "@/api/pay"
import { useRoute, useRouter } from "vue-router"
import { ref, onMounted } from "vue"
import { useUser } from "@/store/users"
import { storeToRefs } from "pinia"
import { ElMessage } from "element-plus"
//pinia的用户信息
let userStore = useUser()
let { userInfo } = storeToRefs(userStore)
//当前路由对象
let route = useRoute()
//最大的路由
let router = useRouter()
//业务
//1.获取上一个页面传过来的query参数，获取当前的产品信息
let { product_id } = route.query

//2.展示产品信息
//根据商品id获取商品的详情，发送请求
let desc = ref("")
let getProduct = async () => {
    tableLoading.value = true
    try {
        let res = await api.getProductApi(product_id)
        tableData.value = res.data.data
        tableLoading.value = false
        //产品的详情，进行赋值，表格下面的结构使用
        desc.value = res.data.data[0].description
        //第一次拿到了商品，所以对total进行初次赋值操作，可以将数据中的Price作为total的首次参数
        tableTotal.value = res.data.data[0].price
        // console.log(res);
    } catch (e) {
        console.log(e);
        tableLoading.value = false
    }
}

//声明一个表格数据
let tableData = ref([])

//声明一个加载动画
let tableLoading = ref(false)

//声明一个列对象，用于展示表格数据
let columns = ref([
    {
        label: "产品名称",
        prop: "productName"
    },
    {
        label: "单价",
        prop: "price"
    },
    {
        label: "数量",
        prop: "quantity"
    },
    {
        label: "总价格",
        prop: "total"
    },
])

//声明计数器的数量和数量变化的方法
let quantity = ref(1)

//计算总价格（计算总价格（只是给用户看的，并不能最终决定付款的价格）
let tableTotal = ref(0)
// tableData.value.toFixed(2)
let handleCountChange = price => {
    tableTotal.value = (quantity.value * price).toFixed(2)
}

//3.进行下单
let commitOrder = async () => {
    //1.调用下单接口，传递product_id和产品数量quantity
    try {
        let res = await payApi.preOrderApi(product_id, quantity.value)
        console.log(res);
        //2.跳转页面，跳转到支付页面，pay/payment
        router.push({ path: "/pay/payment", query: { order_id: res.data.order_id } })
        ElMessage({
            type: 'success',
            message: res.data.msg
        })
    } catch (e) {
        console.log(e);
    }


    //3.payment页面需要拉取订单详情，并且发起支付
}
//支付核心流程或者关键字
//下单：传递商品id和商品数量

//支付：传递订单id













onMounted(() => {
    getProduct()
})

</script>

<script>
export default {
    meta: {
        name: "确认订单"
    }
}
</script>


<style lang="less" scoped>
.price {
    color: #ff0036;
    font-weight: bolder;
}

.total_fee {
    font-size: 16px;
    color: #ff0036;
}

.el-button {
    width: 180px;
    border-radius: 0;
}

.confirm-title {
    text-align: left;
    margin-bottom: 30px;
}

.pre-order {
    padding: 80px 100px 0 100px;
}

.total-fee {
    margin-top: 50px;
    text-align: right;
}

.box-wrap {
    display: inline-block;
    border: 1px solid #ff0036;

    .box-shadow {
        border: 3px solid #fff0e8;
        min-width: 300px;
        padding: 10px 5px 10px 20px;

        .realpay--title {
            font-weight: 700;
            color: #333;
        }

        .realpay--price-symbol {
            font-size: 26px;
            margin-right: 4px;
            color: #999;
        }

        .realpay--price {
            color: #ff0036;
            font: 700 26px tahoma;
        }

        .order-confirmAddr {
            line-height: 1.6;
            font-weight: bolder;
            margin-top: 10px;
            font-size: 16px;

            // text-align: center;
            // font-family: "PingFang SC";
            .confirmAddr-usn {
                color: #ff0036;
                font-size: 20px;
            }

            .confirmAddr-pro {
                color: goldenrod;
                font-size: 16px;
            }
        }
    }
}
</style>